<template>
  <div class="info">
    <el-row>
      <el-col :span="12">
        <el-radio-group v-model="radio" size="medium" @change="handleFilter">
          <el-radio label="1" border>所有</el-radio>
          <el-radio label="2" border>当前主题</el-radio>
          <el-radio label="3" border>系统</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="12">
        <el-input
          v-model="value"
          clearable
          placeholder="搜索编辑区"
          style="width:30%;float:right;"
          @keyup.enter.native="handleFilter"
        />
      </el-col>
    </el-row>
    <el-table
      :data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      border
      style="width: 100%;margin-top:21px;"
    >
      <el-table-column prop="title" label="标题" min-width="20" align="center">
        <template slot-scope="scope">
          <p style="margin:0;">{{ scope.row.content }}</p>
          <span style="font-size:12px;color:#8a8a8a">编码: {{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="latest" label="最近更新" min-width="20" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickDialog(scope)">{{ scope.row.userName }}</el-button>
          <br>
          <span
            style="font-size:12px;color:#8a8a8a"
          >{{ scope.row.updateTimeStr ? scope.row.updateTimeStr : '未编辑' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" min-width="20" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClickPush(scope)">编辑内容</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <user-dialog
      :visiabledialog="userdialog"
      :dialog-data="dialogData"
      @changeVisiable="userdialog = false"
    />
  </div>
</template>

<script>
import UserDialog from '@/components/Dialog'
import Pagination from '@/components/Pagination' // 分页组件
import { getBlockList } from '@/api/operate/block' // 数据接口
import { getUserDetail } from '@/api/deal/userDetail' // 数据接口
import { getTenantId } from '@/utils/auth'
export default {
  components: {
    UserDialog,
    Pagination
  },
  data() {
    return {
      total: 0,
      currentpage: 1,
      pagesize: 10,
      userdialog: false,
      dialogData: {},
      tableData: [],
      listFilter: [],
      radio: '1',
      value: ''
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleClickDialog(scope) {
      getUserDetail(scope.row.userId).then(response => {
        this.dialogData = response.data.item
      })
      this.userdialog = true
    },
    handleClickPush(scope) {
      // 轮播图详情页
      this.$router.push({ name: 'Editorlunbo', params: scope.row })
      // 中部广告详情页
      // this.$router.push({ name: 'Middleadvertise', params: scope.row })
      // 中部横幅
      // this.$router.push({ name: 'Middlestreamer', params: scope.row })
      // 侧边营销模块
      // this.$router.push({ name: 'Broadsidemarket', params: scope.row })
      // 首页底部社交
      // this.$router.push({ name: 'Homebottom', params: scope.row })
      // 首页底部链接区域
      // this.$router.push({ name: 'linkarea', params: scope.row })
    },
    handleSizeChange(val) {
      console.log(val)
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      console.log(val)
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleFilter() {
      this.tableData = this.listFilter.filter(item => {
        if (this.radio === '2' && item.type !== 'current') return false
        if (this.radio === '3' && item.type !== 'system') return false
        if (this.value && item.content.toLowerCase().indexOf(this.value.toLowerCase()) === -1) return false
        return true
      })
      this.total = this.tableData.length
    },
    getData() {
      getBlockList().then(response => {
        this.tableData = response.data.items.filter(item => {
          if (item.tenantId !== getTenantId()) return false
          return true
        })
        this.tableData.map(item => {
          if (item.updateTime) item.updateTimeStr = new Date((item.updateTime)).toLocaleString().replace(/[\u4e00-\u9fa5]/g, '')
        })
        this.listFilter = this.tableData
        this.total = this.tableData.length
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  padding: 14px 20px;
  .addprogram {
    width: 100%;
    padding-bottom: 40px;
    .el-button {
      float: right;
    }
  }
}
</style>
